<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <table border="" cellspacing="" cellpadding="">
        <tr>
            <th>ID</th>
            <th>接口名</th>
            <th>测试人员</th>
            <th>项目名</th>
            <th>项目ID</th>
            <th>描述信息</th>
            <th>创建时间</th>
            <th>用例数</th>
        </tr>
        <tr :key='item.id' v-for="item in lists">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.tester}}</td>
            <td>{{item.project}}</td>
            <td>{{item.project_id}}</td>
            <td>{{item.desc}}</td>
            <td>{{item.create_time}}</td>
            <td>{{item.testcases}}</td>
        </tr>
    </table>
    <hr>
    <form action="">
        账号：<input type="text" v-model="loginForm.user"> <br>
        密码：<input type="password" v-model="loginForm.pwd"><br>
        <button type="button" @click="login_btn()">点击登录</button>
    </form>

</div>
<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            lists: [{
                "id": 1,
                "name": "登录接口_自动化测试平台项目",
                "tester": "可优",
                "project": "自动化测试平台项目",
                "project_id": 1,
                "desc": "登录接口",
                "create_time": "2019-11-06 14:50:30",
                "testcases": 9,
            },
                {
                    "id": 2,
                    "name": "注册接口_自动化测试平台项目",
                    "tester": "可可",
                    "project": "自动化测试平台项目",
                    "project_id": 1,
                    "desc": "自动化测试平台项目, 注册接口",
                    "create_time": "2019-11-06 14:51:00",
                    "testcases": 0,
                },
                {
                    "id": 3,
                    "name": "创建项目接口_自动化测试平台项目",
                    "tester": "可优",
                    "project": "自动化测试平台项目",
                    "project_id": 1,
                    "desc": "这是自动化测试平台创建项目接口",
                    "create_time": "2019-11-06 14:51:45",
                    "testcases": 1,
                },
                {
                    "id": 4,
                    "name": "注册接口_前程贷P2P金融项目",
                    "tester": "小可可",
                    "project": "前程贷P2P金融项目",
                    "project_id": 2,
                    "desc": "",
                    "create_time": "2019-11-06 14:52:22",
                    "testcases": 0,
                },
                {
                    "id": 5,
                    "name": "登录接口_前程贷P2P金融项目",
                    "tester": "柠檬小姐姐",
                    "project": "前程贷P2P金融项目",
                    "project_id": 2,
                    "desc": "",
                    "create_time": "2019-11-06 14:52:40",
                    "testcases": 0,
                },
                {
                    "id": 6,
                    "name": "查看项目列表接口_前程贷P2P金融项目",
                    "tester": "柠檬小姐姐",
                    "project": "前程贷P2P金融项目",
                    "project_id": 2,
                    "desc": "",
                    "create_time": "2019-11-06 17:22:50",
                    "testcases": 1,
                }
            ],
            loginForm: {
                user: '',
                pwd: ''
            }
        },
        methods: {
            login_btn() {
                console.log('用户登录的数据为：', this.loginForm)
            }
        }
    })
</script>


</body>
</html>
